<script setup>
import {ref} from "vue";

const checked4 = ref(true);
const onChange4 = (status) => {
  checked4.value = status
}
</script>

<template>
  <el-check-tag :checked="checked4" @change="onChange4" class="wordFormedTag" size="small">
    v.1
  </el-check-tag>
  <el-check-tag :checked="checked4" @change="onChange4" class="wordFormedTag" size="small">
    v.idioms.1
  </el-check-tag>

<!--  <br/>-->
<!--  <br/>-->

  <el-tag :key="`aaa`" closable :type="`warning`" class="myeltag">
    v.idioms.1
  </el-tag>

  <el-tag :key="`aaa`" closable class="myeltag">
    n.1
  </el-tag>

  <el-tag :key="`aaa`" closable class="myclosable">
    v.idioms.1
  </el-tag>
  <el-tag :key="`aaa`" class="myclosable">
    v.idioms.2
  </el-tag>
</template>

<style scoped>
.el-check-tag.wordFormedTag{
  font-weight: 520;
  --el-font-size-base: 12px;
  line-height: 7px;
  padding:7px 9px;
  margin: 3px;
  --el-border-radius-base: 3px;
}
.el-check-tag.wordFormedTag.is-checked {
  background-color: var(--color-nounsOut);
  color: #ffffff;
}




.el-tag.myeltag{
  font-weight: 600;
  --el-font-size-base: 12px;
  line-height: 8px;
  height: var(--common-tag-height);
  padding:7px 7px;
  margin: 3px;
  border-width: 1.5px;
  --el-tag-border-radius: 3px;
  --el-tag-bg-color: var(--color-nounsOut-bg-color);
  --el-tag-border-color: var(--color-nounsOut);
  --el-tag-hover-color: var(--color-nounsOut);
  --el-tag-text-color:var(--color-nounsOut);
  color: var(--color-nounsOut);
  border-style: dashed;
  border-color: var(--color-nounsOut);
  //background-color: var(--color-nounsOut-bg-color-editing);
  background-color: var(--color-nounsOut-bg-color);
}

.el-tag.myclosable{
  font-weight: 520;
  --el-font-size-base: 12px;
  line-height: 8px;
  height: var(--common-tag-height);
  padding:7px 7px;
  margin: 3px;
  --el-tag-border-radius: 3px;
  border-style: none;
  --myclosable-text-color: #ffffff;
  --el-tag-bg-color: var(--color-nounsOut);
  --el-tag-hover-color: var(--color-nounsOut-bg-color-editing);
  --el-tag-text-color:var(--myclosable-text-color);
  color: var(--myclosable-text-color);
  //background-color: var(--color-nounsOut-bg-color-editing);
  background-color: var(--color-nounsOut);

  .el-tag__close{
    color: var(--color-nounsOut);
  }
}
</style>